<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<link rel="stylesheet" href="js/swiper/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/base1.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/all.css" rel="stylesheet">
		<link rel="stylesheet" href="js/swiper/swiper.min.css">
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			});
		</script>
		<script src="js/hmt.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/swipe.js"></script>
		<script src="js/fastclick.js"></script>
		<script type="text/javascript" src="js/hmt.js"></script>
		<script src="js/swiper/swiper.jquery.min.js"></script>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/global.js"></script>
		<script>
			$(function() {
				var banner = new Swiper('.banner', {
					autoplay: 5000,
					pagination: '.swiper-pagination',
					paginationClickable: true,
					lazyLoading: true,
					loop: true
				});
				mui('.pop-schwrap .sch-input').input();
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				mui('.pop-schwrap .scroll-wrap').scroll({
					bounce: true,
					indicators: true,
					deceleration: deceleration
				});
				$('.top-sch-box .fdj,.top-sch-box .sch-txt,.pop-schwrap .btn-back').on('click', function() {
					$('html,body').toggleClass('holding');
					$('.pop-schwrap').toggleClass('on');
					if($('.pop-schwrap').hasClass('on')) {;
						$('.pop-schwrap .sch-input').focus();
					}
				});

			});
		</script>
		<style type="text/css">
			.swiper-wrapper {
				margin-top: 0%;
				/*z-index: -1;*/
			}
			
			#head {
				width: 100%;
				height: 30px;
			}
			
			#head ul {
				padding: 0;
				margin: 0;
				padding-top: 5px;
				padding-left: 5px;
				height: 600px;
			}
			
			#head ul li {
				list-style: none;
				float: left;
				text-decoration: none;
				display: block;
				width: 17%;
				margin-top: -1%;
				margin-left: 3.5%;
				margin-right: 3.5%;
				padding: 9px;
				position: relative;
				border: 1px solid #9E9E9E;
				border-radius: 15px;
				box-shadow: black 0 0 2px;
			}
			/*#head ul li { text-decoration:none; 
	 		font-size: 15px;
	 		color:#000;
	 		}*/
			
			#head ul li :visited {
				text-decoration: none;
				color: white;
			}
			
			#head ul li :active {
				text-decoration: none;
				color: white;
			}
			
			
			
			.prat{
				width: 100%;
				height: 170px;
				background-position: center;
				background-size: cover;
				/*border-radius: 15px;*/
			}
			.index_dl_01 {
				width: 45%;
				height: 200px;
				float: left;
				margin-left: 3%;
				background: #E6E6E6;
				margin-bottom: 2%;
				/*border-radius: 15px;*/
				margin-top: 3%;
				text-align: center;
				/*box-shadow: black 0 0 4px;*/
			}
			.centerflex {
				width: 70%;
				border: 1px solid #A0A0A0;
				margin-left: 20%;
				font-size: 12px;
				margin-top: -3%;
				height: 28px;
				border-radius: 20px;
			}
			.icona{
				float: left;
				margin-top: -4%;
			}
		</style>
	</head>
	<!--loading页开始-->
	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>
	<!--loading页结束-->

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<div class="top-sch-box flex-col">
					<a class="icona" href="#">
						<img id="showCityPicker3" src="images/address.png" style="height: 30px; width: auto; margin-top: 5px;" />
						<h5 id="setsrui" style=" display: inline-block;line-height: 44px;"></h5>
					</a>
				<div class="centerflex">
					<i class="fdj iconfont icon-search"></i>
					<div class="sch-txt">请输入关键词</div>
					<span class="shaomiao"><i class="iconfont icon-saoma"><img src="img/icon/ftmenu2.png" class="sch-txt" style=" margin-top: -3px; height: 30px; width: auto;" /> </i></span>
				</div>
			</div>
		</header>
		
		<div class="mui-content" id="main">
			
			<div class="pop-schwrap">
				<div class="ui-scrollview">
					<div class="mui-bar mui-bar-nav clone">
						<a href="index-bak.html" class="mui-icon mui-icon-left-nav mui-pull-left" style="color: #007AFF;"></a>
						<div class="top-sch-box flex-col" style="border:  1px solid #A0A0A0; height: 30px; width: 50%; margin-left: 10%;">
							<!--<div class="centerflex" style="margin-top: -3%;">-->
								<input class="sch-input mui-input-clear" type="text" name="" id="" placeholder="请输入关键字"  style=" line-height: 30px;"/>
							<!--</div>-->
						</div>
						<a class="mui-btn mui-btn-primary sch-submit" style="background-color: #fff; color: #000000; font-size: 15px;" href="#">搜索</a>
					</div>
				</div>
			</div>
			
			<div class="banner swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="javascript:void(0)"><img class="swiper-lazy" data-src="uploads/1.jpg" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href="javascript:void(0)"><img class="swiper-lazy" data-src="uploads/2.jpg" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href="javascript:void(0)"><img class="swiper-lazy" data-src="uploads/3.1.jpg" alt=""></a>
					</div>
					<div class="swiper-slide">
						<a href="javascript:void(0)"><img class="swiper-lazy" data-src="uploads/4.jpg" alt=""></a>
					</div>
				</div>
				<div class="swiper-pagination"></div>
			</div>

			<div id="head" style="height: 65px;">
				<ul>
					<li id="L1" style="text-align: center; height: 10%; background-image: url(images/50.png); background-size: 100%; border: red solid 1px;">
					</li>
					<li id="L2"  style="text-align: center;  height: 10%;background-image: url(images/25.png); background-size: 100%;">
					</li>
					<li id="L3" style="text-align: center;  height: 10%;background-image: url(images/21.png); background-size: 100%;">
					</li>
					<li id="L4" style="text-align: center; height: 10%;background-image: url(images/51.png); background-size: 100%;">
					</li>
				</ul>
			</div>
			
			<div id="d5" class="mui-content">
				<section class="self">
					<dl class="index_dl_01">
						<dt><img class="prat" src="images/1.jpg" /></dt>
						<dd style="margin-top: 5px;">
							<span style="font-size: 15px;">超市</span>
						</dd>
					</dl>
					<dl class="index_dl_01">
						<dt><img class="prat" src="images/1.jpg" /></dt>
						<dd style="margin-top: 5px;">
							<span style="font-size: 15px;">店铺</span>
						</dd>
					</dl>
					<dl class="index_dl_01">
						<dt><img class="prat" src="images/1.jpg" /></dt>
						<dd style="margin-top: 5px;">
							<span style="font-size: 15px;">宾馆</span>
						</dd>
					</dl>
					<dl class="index_dl_01">
						<dt><img class="prat" src="images/1.jpg" /></dt>
						<dd style="margin-top: 5px;">
							<span style="font-size: 15px;">广场</span>
						</dd>
					</dl>
				</section>				
			</div>
			
			<div id="d1">
				
			</div>	
			
			<div id="d2">
				
			</div>
			
			<div id="d3">
				
			</div>
			
			<div id="d4">
				
			</div>
			</div>
		</div>
		<footer class="page-footer fixed-footer">
		<ul  style="font-size: 10%;">
			<li>
				<a href="index.html">
					<img src="images/footer01.png"/>
					<p><font size="1"> 首页</font></p>
				</a>
			</li>
			<li>
				<a href="index-bak.html">
					<img src="images/footer002.png"/>
					<p ><font size="1"> 附近 </font>	</p>
				</a>
			</li>
			<li>
				<a href="shopcar.html">
					<img src="images/footer03.png"/>
					<p><font size="1"> 购物车 </font> </p>
				</a>
			</li>
			<li class="active">
				<a href="self.html">
					<img src="images/footer04.png"/>
					<p><font size="1">  个人中心</font> </p>
				</a>
			</li>
		</ul>
	</footer>
			<script src="js/mui.min.js"></script>
			<script src="js/mui.js"></script>
			<script src="js/mui.picker.js"></script>
			<script src="js/mui.poppicker.js"></script>
			<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
			<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
			<script>
				//alert();
				(function($, doc) {
					$.init();
					$.ready(function() {
						var _getParam = function(obj, param) {
							return obj[param] || '';
						};
						var cityPicker3 = new $.PopPicker({
							layer: 3
						});
						cityPicker3.setData(cityData3);
						var showCityPickerButton = doc.getElementById('showCityPicker3');
						var cityResult3 = doc.getElementById('cityResult3');
						var setsrui = document.getElementById("setsrui");
						showCityPickerButton.addEventListener('tap', function(event) {
							cityPicker3.show(function(items) {
								//alert(setsrui);
								setsrui.innerHTML=_getParam(items[2], 'text');
//								cityResult3.innerText = "•" + _getParam(items[2], 'text');
							});
						}, false);
					});
				})(mui, document);
				
				var L1 = document.getElementById("L1");
				var L2 = document.getElementById("L2");
				var L3 = document.getElementById("L3");
				var L4 = document.getElementById("L4");
				var d1 = document.getElementById("d1");
				var d2 = document.getElementById("d2");
				var d3 = document.getElementById("d3");
				var d4 = document.getElementById("d4");
				var d5 = document.getElementById("d5");
				L1.addEventListener('tap',function(){
					d5.innerHTML = "";
					d2.innerHTML = "";
					d3.innerHTML = "";
					d4.innerHTML = "";
					L2.style.border = "";
					L3.style.border = "";
					L4.style.border = "";
					$( "#d1" ).load( "fujin01.html", function( response, status, xhr ) {
				  		$('#d1').html(response);
					});
				})
				L2.addEventListener('tap',function(){
					d5.innerHTML = "";
					d1.innerHTML = "";
					d3.innerHTML = "";
					d4.innerHTML = "";
					L1.style.border = "";
					L3.style.border = "";
					L4.style.border = "";
					L2.style.border = "red solid 1px";
					$( "#d2" ).load( "fujin02.html", function( response, status, xhr ) {
				  		$('#d2').html(response);
					});
				})
				L3.addEventListener('tap',function(){	
					d5.innerHTML = "";
					d2.innerHTML = "";
					d1.innerHTML = "";
					d4.innerHTML = "";
					L2.style.border = "";
					L1.style.border = "";
					L4.style.border = "";
					L3.style.border = "red solid 1px";
					$( "#d3" ).load( "fujin03.html", function( response, status, xhr ) {
				  		$('#d3').html(response);
					});
				})
				L4.addEventListener('tap',function(){
					d5.innerHTML = "";
					d2.innerHTML = "";
					d3.innerHTML = "";
					d1.innerHTML = "";
					L2.style.border = "";
					L1.style.border = "";
					L3.style.border = "";
					L4.style.border = "red solid 1px";
					$( "#d4" ).load( "fujin04.html", function( response, status, xhr ) {
				  		$('#d4').html(response);
					});
				})
			</script>
	</body>

</html>